<script setup>
import { ref, reactive, onMounted } from 'vue'
import { listSchedules, createSchedule, updateSchedule, deleteSchedule } from '../../api/admin'

const loading = ref(false)
const list = ref([])
const total = ref(0)
const query = reactive({ doctorId: '', date: '', page: 1, size: 10 })

const dialog = reactive({ visible: false, title: '新建排班', form: { scheduleId: null, doctorId: '', scheduleDate: '', timePeriod: '', status: 1 } })

// 状态标签映射（整数）
const scheduleStatusLabel = (s) => ({ 1: '可用', 0: '不可用' }[s] || s)

const fetchList = async () => {
  loading.value = true
  try {
    const data = await listSchedules({ doctorId: query.doctorId || undefined, date: query.date || undefined, page: query.page, size: query.size })
    list.value = data.list || []
    total.value = data.total || 0
  } finally { loading.value = false }
}

const openCreate = () => {
  dialog.title = '新建排班'
  dialog.form = { scheduleId: null, doctorId: '', scheduleDate: '', timePeriod: '', status: 1 }
  dialog.visible = true
}

const openEdit = (row) => {
  dialog.title = '编辑排班'
  dialog.form = { scheduleId: row.scheduleId, doctorId: row.doctorId, scheduleDate: row.scheduleDate, timePeriod: row.timePeriod, status: row.status }
  dialog.visible = true
}

const save = async () => {
  if (!dialog.form.doctorId || !dialog.form.scheduleDate || !dialog.form.timePeriod || (dialog.form.status === '' || dialog.form.status === null || dialog.form.status === undefined)) return
  const payload = { doctorId: dialog.form.doctorId, scheduleDate: dialog.form.scheduleDate, timePeriod: dialog.form.timePeriod, status: dialog.form.status }
  if (dialog.form.scheduleId) {
    await updateSchedule(dialog.form.scheduleId, payload)
  } else {
    await createSchedule(payload)
  }
  dialog.visible = false
  fetchList()
}

const remove = async (row) => {
  await deleteSchedule(row.scheduleId)
  fetchList()
}

onMounted(fetchList)
</script>

<template>
  <el-card>
    <div class="toolbar">
      <h3>医生排班管理</h3>
      <div>
        <el-input v-model="query.doctorId" placeholder="医生ID" style="width:160px" />
        <el-date-picker v-model="query.date" type="date" placeholder="日期" value-format="YYYY-MM-DD" />
        <el-button class="ml-1" type="primary" @click="query.page=1;fetchList()">查询</el-button>
        <el-button class="ml-1" type="success" @click="openCreate">新建排班</el-button>
      </div>
    </div>
    <el-table :data="list" v-loading="loading">
      <el-table-column prop="scheduleId" label="ID" width="80" />
      <el-table-column prop="doctorId" label="医生ID" width="120" />
      <el-table-column prop="scheduleDate" label="日期" width="160" />
      <el-table-column prop="timePeriod" label="时段" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">{{ scheduleStatusLabel(row.status) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="openEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mt-2" background layout="total, prev, pager, next" :total="total" :page-size="query.size" :current-page="query.page" @current-change="(p)=>{query.page=p;fetchList()}" />
  </el-card>

  <el-dialog v-model="dialog.visible" :title="dialog.title" width="480px">
    <el-form label-width="100px">
      <el-form-item label="医生ID"><el-input v-model="dialog.form.doctorId" /></el-form-item>
      <el-form-item label="日期"><el-date-picker v-model="dialog.form.scheduleDate" type="date" value-format="YYYY-MM-DD" /></el-form-item>
      <el-form-item label="时段">
        <el-select v-model="dialog.form.timePeriod" style="width:200px">
          <el-option label="上午" value="上午" />
          <el-option label="下午" value="下午" />
          <el-option label="夜间" value="夜间" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="dialog.form.status" style="width:200px">
          <el-option label="可用" :value="1" />
          <el-option label="不可用" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialog.visible=false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ml-1{ margin-left:8px; }
.mt-2{ margin-top:12px; }
</style>